<template>
  <div class="stream-area flex">
    <div class="video-stream w-65/100 duration-300 object-cover">
      <transition
        appear
        enter-active-class="transition duration-800 delay-0 ease-in"
        enter-from-class="opacity-0 transform translate-y-25"
        enter-to-class="opacity-100 transform-none"
      >
        <video
          class="video-js max-w-full w-full duration-400 rounded-t-2xl rounded-r-2xl cursor-pointer"
          id="my_video_1"
          controls
          preload="none"
          poster="https://images.unsplash.com/photo-1476801071117-fbc157ae3f01?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDh8fHxlbnwwfHx8&w=1000&q=80"
          data-setup="{ 'aspectRatio':'940:620', 'playbackRates': [1, 1.5, 2] }"
        >
          <source
            src="https://player.vimeo.com/external/390402719.sd.mp4?s=20cfdb066c4253047562b65bd4e411b86a004bc5&profile_id=139&oauth2_token_id=57447761"
            type="video/mp4"
          />
          <source
            src="https://player.vimeo.com/external/390402719.sd.mp4?s=20cfdb066c4253047562b65bd4e411b86a004bc5&profile_id=139&oauth2_token_id=57447761"
            type="video/webm"
          />
        </video>
      </transition>
      <div class="video-detail flex mt-7.5 w-full">
        <div class="video-content w-full">
          <transition
            appear
            enter-active-class="transition duration-800 delay-100 ease-in"
            enter-from-class="opacity-0 transform translate-y-25"
            enter-to-class="opacity-100 transform-none"
          >
            <div class="video-p-wrapper flex items-center mr-3">
              <div class="author-img__wrapper">
                <Avatar class="mr-3" />
              </div>
              <div class="video-p-detail flex-col items-center mr-3">
                <div class="video-p-name flex items-center mb-2 mr-3 text-light-50">Andy William</div>
                <div class="video-p-sub mr-3 text-xs">1,980,893 subscribers</div>
              </div>
              <div class="button-wrapper flex items-center ml-auto">
                <button
                  class="like flex items-center py-2.5 px-4 border-0 rounded-lg group bg-buttonbg hover:bg-red-400 text-light-50 text-sm cursor-pointer"
                >
                  <span
                    class="iconify w-4.5 flex-shrink-0 mr-2.5 p-0 group-hover:text-blue-500"
                    data-icon="mdi:share-variant"
                    data-inline="false"
                  ></span>
                  Share
                </button>
                <button
                  class="like flex items-center py-2.5 px-4 ml-4 border-0 rounded-lg group bg-buttonbg hover:bg-red-400 text-light-50 text-sm cursor-pointer"
                >
                  <span
                    class="iconify w-4.5 flex-shrink-0 mr-2.5 p-0 group-hover:text-red-500"
                    data-icon="topcoat:like"
                    data-inline="false"
                  ></span>
                  Like
                </button>
              </div>
            </div>
          </transition>
          <transition
            appear
            enter-active-class="transition duration-800 delay-200 ease-in"
            enter-from-class="opacity-0 transform translate-y-25"
            enter-to-class="opacity-100 transform-none"
          >
            <div
              class="video-p-title mt-4 mb-5 mx-0 text-light-50 text-2xl leading-5"
            >Basic how to ride your Skateboard</div>
          </transition>
          <transition
            appear
            enter-active-class="transition duration-800 delay-300 ease-in"
            enter-from-class="opacity-0 transform translate-y-25"
            enter-to-class="opacity-100 transform-none"
          >
            <div
              class="video-p-subtitle mr-3 text-sm leading-6"
            >Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus illum tempora consequuntur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis earum velit accusantium maiores qui sit quas, laborum voluptatibus vero quidem tempore facilis voluptate tempora deserunt!</div>
          </transition>
          <transition
            appear
            enter-active-class="transition duration-800 delay-400 ease-in"
            enter-from-class="opacity-0 transform translate-y-25"
            enter-to-class="opacity-100 transform-none"
          >
            <div
              class="video-p-subtitle mt-4 mr-3 text-sm leading-6"
            >Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus laborum qui dolorum fugiat eius accusantium repellendus illum tempora consequuntur. Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
          </transition>
        </div>
      </div>
    </div>
    <div class="chat-stream flex-grow ml-7.5">
      <div class="chat px-5 max-h-md overflow-auto bg-gray-700 rounded-2xl">
        <transition
          appear
          enter-active-class="transition duration-800 delay-0 ease-in"
          enter-from-class="opacity-0 transform translate-y-25"
          enter-to-class="opacity-100 transform-none"
        >
          <div
            class="chat-header flex items-center sticky py-5 px-0 top-0 left-0 bg-gray-700 z-1 border-b text-base font-semibold text-light-50"
          >
            Live Chat
            <div class="flex items-center ml-auto text-body text-xs">
              <span
                class="iconify w-3.75 mr-1.5 flex-shrink-0"
                data-icon="fluent:people-20-filled"
                data-inline="false"
              ></span>
              15,988 people
            </div>
          </div>
        </transition>
        <div class="message-container">
          <transition-group
            appear
            enter-active-class="transition duration-800 delay-400 ease-in"
            @before-enter="onBeforeEnter"
            enter-from-class="opacity-0 transform translate-y-25"
            enter-to-class="opacity-100 transform-none"
          >
            <div
              class="message flex items-center mt-4.5 last:mb-4.5"
              v-for="(item,index) in messageData"
              :key="index"
            >
              <Avatar class="mr-3" />
              <div class="msg-wrapper">
                <div class="msg__name text-xs mb-2 text-light-50">{{ item.name }}</div>
                <div class="msg__content leading-6 overflow-hidden text-xs">{{ item.content }}</div>
              </div>
            </div>
          </transition-group>
        </div>
        <transition
          appear
          enter-active-class="transition duration-800 delay-100 ease-in"
          enter-from-class="opacity-0 transform translate-y-25"
          enter-to-class="opacity-100 transform-none"
        >
          <div class="chat-footer flex items-center relative sticky w-full bottom-0 left-0 pb-3">
            <span
              class="iconify absolute left-3 w-5 h-5 text-gray-300"
              data-icon="fluent:more-circle-20-filled"
              data-inline="false"
            ></span>
            <input
              class="px-10 py-3 w-full border-0 bg-gray-500 rounded-2xl text-xs text-light-50 font-medium"
              type="text"
              placeholder="写你的消息"
            />
            <span
              class="iconify absolute right-3 w-5 h-5 rounded-full bg-purple-600"
              data-icon="mdi:share-variant"
              data-inline="false"
            ></span>
          </div>
        </transition>
      </div>
      <div class="chat-vid__container mt-10">
        <transition
          appear
          enter-active-class="transition duration-800 delay-300 ease-in"
          enter-from-class="opacity-0 transform translate-y-25"
          enter-to-class="opacity-100 transform-none"
        >
          <div class="chat-vid__title text-light-50 text-lg">Related Videos</div>
        </transition>
        <transition-group
          appear
          enter-active-class="transition duration-800 delay-400 ease-in"
          @before-enter="onBeforeEnter"
          enter-from-class="opacity-0 transform translate-y-25"
          enter-to-class="opacity-100 transform-none"
        >
          <div class="chat-vid" v-for="(item,index) in chatVidData" :key="index">
            <div class="chat-vid__wrapper flex items-center mt-6.5">
              <img
                class="chat-vid__img w-24 h-20 rounded-lg object-cover object-right mr-4 duration-300 hover:transform hover:scale-102"
                :src="item.image"
                alt
              />
              <div class="chat-vid__content">
                <div
                  class="chat-vid__name text-light-50 text-sm leading-5 overflow-hidden"
                >{{ item.name }}</div>
                <div class="chat-vid__by text-sm text-body">{{ item.by }}</div>
                <div class="chat-vid__info text-sm text-body">
                  {{ item.infoviews }}
                  <span class="seperate"></span>
                  {{ item.infotime }}
                </div>
              </div>
            </div>
          </div>
        </transition-group>

        <transition
          appear
          enter-active-class="transition duration-800 delay-600 ease-in"
          enter-from-class="opacity-0 transform translate-y-25"
          enter-to-class="opacity-100 transform-none"
        >
          <div
            class="chat-vid__button flex justify-center items-center px-2.5 py-0 h-10 duration-300 rounded-lg cursor-pointer bg-purple-500 hover:bg-purple-700 border-0 text-light-50 text-xs mt-6.5"
          >See All related videos (32)</div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Avatar from "@renderer/components/common/Avatar.vue";
import { reactive } from 'vue-demi';
const messageData = reactive([
  {
    name: "Wijaya Adabi",
    content: "Lorem ipsum clor sit, ame conse quae debitis",
  }, {
    name: "Johny Wise",
    content: "Suscipit eos atque voluptates labore",
  }, {
    name: "Budi Hakim",
    content: "Dicta quidem sunt adipisci",
  },
  {
    name: "Wijaya Adabi",
    content: "Lorem ipsum clor sit, ame conse quae debitis",
  }, {
    name: "Johny Wise",
    content: "Suscipit eos atque voluptates labore",
  }, {
    name: "Budi Hakim",
    content: "Dicta quidem sunt adipisci",
  }
])

const chatVidData = reactive([
  {
    image: "https://cdn.nohat.cc/thumb/f/720/3b55eddcfffa4e87897d.jpg",
    name: "Prepare for your first skateboard jump",
    by: "Jordan Wise",
    infoviews: "125.908 views",
    infotime: "2 days ago",
  }, {
    image: "https://iamaround.it/wp-content/uploads/2015/02/pexels-photo-4663818.jpeg",
    name: "Prepare for your first skateboard jump",
    by: "Jordan Wise",
    infoviews: "125.908 views",
    infotime: "2 days ago",
  }
])

const onBeforeEnter = (el) => {
  let delay = 100 + el.dataset.index * 100
  // console.log('delay', delay);
  for (let i = 0, l = el.classList.length; i < l; ++i) {
    if (/delay-.*/.test(el.classList[i])) {
      console.log('aaa', el.classList[i]);
      el.classList.remove(el.classList[i])
    }
  }
  el.classList.add(`delay-${delay}`)
  // console.log('el class', el.classList);
}

</script>

<style lang="scss" scoped>
</style>